<template>
	<view class="contian">

		<uni-nav-bar statusBar left-icon="left" title="充电详情" statusBar :fixed="true" :border="false" style="width: 100%"
			:color="navTextColor" class="navbar" :backgroundColor="navBgColor" @clickLeft="$tab.navigateBack()" />

		<view class="header">

		</view>
		<view class="conten_item">内容1</view>
		<view class="conten_item">内容2</view>
		<view class="conten_item">内容3</view>
		<view class="conten_item">内容4</view>
	</view>
</template>

<script>
	// import navBar from "@/components/zhouWei-navBar/zhouWei-navBar.vue";
	export default {
		components: {
			// navBar
		},
		data() {
			return {
				// 滑动距离
				slideHeight: 100,
				statusBarHeight: '',
				navBgColor: "rgba(0,0,0,0)", // 初始背景颜色为完全透明
				navTextColor: "rgba(255,255,255,1)", // 初始文字颜色
				// 渐变导航背景颜色
				shadeBackground: "255,255,255",
				lastScrollTop: 0 // 存储上一次滚动位置
			};
		},
		onLoad(option) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		onPageScroll(e) {
			// this.$refs.navBar.pageScroll(e);
			// console.log('e', e);
			let scrollTop = e.scrollTop
			// 设置背景
			const newAlpha = Math.min((e.scrollTop / this.slideHeight) * 1, 1);
			this.navBgColor = `rgba(${this.shadeBackground},${newAlpha})`;
			// 设置文字

			let percentage = Math.min(Math.max(scrollTop / this.slideHeight, 0), 1);
			let newR = Math.round(255 * (1 - percentage)); // 255到0
			let newG = Math.round(255 * (1 - percentage)); // 255到0
			let newB = Math.round(255 * (1 - percentage)); // 255到0
			let newTextAlpha = 1 - percentage;


			if (e.scrollTop > this.lastScrollTop) {
				// 向下滚动
				if (newTextAlpha >= 0.75) {
					newR = newG = newB = 255
				} else if (newTextAlpha <= 0.5) {
					newR = newG = newB = 0;
					newTextAlpha = percentage;
				}
				console.log('down', newR);
			} else {

				if (newTextAlpha < 0.25) {
					newR = newG = newB = 0;

					newTextAlpha = percentage;
				}
				console.log('up', percentage);

			}
			// newR = newG = newB = 255 * 0.25
			newR = newG = newB = 255 * 0.25

			newTextAlpha = scrollTop >= this.slideHeight ? 1 : newTextAlpha

			// 更新导航栏文字颜色
			this.navTextColor = `rgba(${newR}, ${newG}, ${newB}, ${newTextAlpha})`;

			console.log('text', this.navTextColor);
			// 更新最后一次滚动位置
			this.lastScrollTop = scrollTop;

		},
		onShow() {
			this.lastScrollTop = 0
		},
		methods: {


		}
	};
</script>

<style lang="scss" scoped>
	.contian {
		width: 100%;
		height: 100%;
		position: relative;

		.navbar {
			position: relative;
			transition: background-color 0.3s, color 0.3s;
		}

		.nav_bar {
			width: 100%;
			// position: relative;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;

			.status_bar {
				height: var(--status-bar-height);
				width: 100%;
			}

			.nav_contain {
				width: 100%;
				// height: 120rpx;
				height: 88rpx;
				position: relative;
				display: flex;
				align-items: center;

			}

			.header-containe {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

				text {
					color: #fff;
					font-size: 32rpx;
				}
			}
		}

		.header {
			width: 100%;
			height: 600rpx;
			background-image: url('https://smart.fwt.life/resource/mini-program/charging/wheel-chage-top.png');
			background-size: 100% 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.conten_item {
			width: 100%;
			height: 420rpx;
		}
	}
</style>